<template>
	<view>
		<u-upload
			:fileList="fileList1"
			@afterRead="afterRead"
			@delete="deletePic"
			name="1"
			multiple
			:maxCount="maxNum"
		></u-upload>
	</view>
</template>

<script>
export default {
	name: 'upload',
	data() {
		return {
			fileList1: []
		};
	},
	props: {
		maxNum: {
			type: Number,
			default: 6
		}
	},
	methods: {
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
			this.$emit('removeImage', event);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			let that = this;
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.$IMG_URL + 'common/upload',
					filePath: url,
					name: 'file',
					header: {
						token: uni.getStorageSync('token')
					},
					success: res => {
						setTimeout(() => {
							that.$emit('successImage', JSON.parse(res.data));
							resolve(res.data.data);
						}, 1000);
					}
				});
			});
		}
	}
};
</script>

<style lang="scss"></style>
